<template>
   <img  class="imgs"  v-bind="$attrs"   />
</template>
<script setup>
import { ref,defineProps,onMounted,onBeforeUnmount} from 'vue'
// @param src图片地址字符串类型如果图片不能访问就会展示灰色背景颜色
// @param showType载剪方式，等同于 background-size的属性值都支持
// @param position位置等同于 background-position
// @param bgcolor背景顾色当图片加载失败时候设置的背景颇色
// @param bgImg背景图片当图片加载失败时调用的默认为空
const props = defineProps({
    src: {
        type: String,
        default: ""
    },
    showType:{
        type: String,
        default: 'contain'
    },
    position:{
        type: String,
        default: 'center'
    },
    bgcolor:{
        type: String,
        default: '#f0f0f0'
    },
    bgImg:{
        type: String,
        default: ''
    }
})
// nextTick 当前dom加载完毕后 自动被调用的句子


// 加载图片的方法
function loadImage(){
    let imgObj = new Image();
    imgObj.src = props.src;
    imgDom.value.style.backgroundRepeat = "no-repeat";
    imgDom.value.style.backgroundSize = props.showType;
    imgDom.value.style.backgroundPosition = props.position;
    imgDom.value.style.backgroundColor = props.bgcolor;
   imgObj.onload=(evt)=>{
    console.log(evt,props.src,18)
    imgDom.value.style.backgroundImage = `url(${props.src})`;
   }
   imgObj.onerror=()=>{
    console.log("加载失败")
    imgDom.value.style.backgroundColor = props.bgcolor;
    if(props.bgImg){
        imgDom.value.style.backgroundImage = `url(${props.bgImg})`;
    }
   }
}
onMounted(()=>{
   const observer = new IntersectionObserver(
    (entries)=>{
    entries.forEach((entry)=>{
        if(entry.isIntersecting){
            loadImage();
        }else{
            console.log("元素离开可视区域")
        }
    })
   },{
    threshold:0.1
   }
)
if(imgDom.value){
    observer.observe(imgDom.value);
}
onBeforeUnmount(() => {
    observer.disconnect();
})
})



const imgDom = ref(null)
console.log(props.src,15)
// function handleError() {
//     console.log('图片加载失败')
//     console.log(imgDom.value)
//     imgDom.value.src = '/u=1584012185,1372522640&fm=253&gp=0.jpg'
// }
</script>
<style scoped>
.imgs{
    background-color: red;
    display: inline-block;
}

</style>